<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- <link rel="stylesheet" type="text/css" href="reset.css" /> -->
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/swiper.css" />
        
        <script type="text/javascript" src="js/flexible.debug.js"></script>
        <script type="text/javascript" src="js/flexible_css.debug.js"></script>
        

    </head>
    <body>
        <header class="header">
            <span class="span_one"><img src="img/shexiang.png" /></span>
            <span class="span_two">商城</span>
            <span class="span_three"><img src="img/message.png" /></span>
        </header>
        
        <main class="main">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/banner.png" /></div>
                    <div class="swiper-slide"><img src="img/banner.png" /></div>
                    <div class="swiper-slide"><img src="img/banner.png" /></div>
                    <div class="swiper-slide"><img src="img/banner.png" /></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <article class="article_one">
                <h1><span class="market">进入卖场</span><img src="img/zhuanxiangqu.png" /></h1>
                <figure class="shouji">
                    <ul>
                        <!--<li>
                            <img src="img/图层 65.png">
                            <div>荣耀4C<br>至强性能&nbsp;冰点价格</div>
                        </li>
                        <li>
                            <img src="img/图层 63.png">
                            <div>苹果iphone6splus<br>给你新鲜体验</div>
                        </li>
                        <li>
                            <img src="img/图层 64.png">
                            <div>meitu手机<br>女孩子的最爱</div>
                        </li>
                        <li>
                            <img src="img/图层 66.png">
                            <div>魅族蓝色经典<br>给你不一样的色彩感受</div>
                        </li>
                        <li>
                            <img src="img/图层 67.png">
                            <div>nuoio 2.0<br>全新品牌概念手机</div>
                        </li>
                        <li>
                            <img src="img/图层 68.png">
                            <div>自拍神器<br>即是手机也是相机</div>
                        </li>-->
                    </ul>
                </figure>
            </article>
            <article class="article_two">
                <h1><span class="market">进入卖场</span><img src="img/shangxin.png" /></h1>
                <figure class="shouji">
                    <ul>
                        <li>
                            <img src="img/图层 43.png">
                        </li>
                    </ul>
                </figure>
            </article>
            <article class="article_three">
                <h1><span class="market">进入卖场</span><img src="img/Popularity.png" /></h1>
                <figure class="shouji">
                    <ul>
                       
                    </ul>
                </figure>
            </article>
            <article class="article_four">
                <h1><span class="market">入场疯抢</span><img src="img/Popularity.png" /></h1>
                <figure class="shouji">
                    <ul>
                        <!--<li>
                            <img src="img/手表.png">
                            <div>尼大衣来袭</div>
                        </li>
                        <li>
                            <img src="img/图层 81.png">
                            <div>女士系列</div>
                        </li>
                        <li>
                            <img src="img/图层 82.png">
                            <div>羽绒服棉服</div>
                        </li>-->
                    </ul>
                </figure>
            </article>
            <article class="article_five">
                <h1><span class="market">进入卖场</span><img src="img/shangxin.png" /></h1>
                <figure class="shouji">
                    <ul>
                        <li>
                            <img src="img/图层 43.png">
                        </li>
                    </ul>
                </figure>
            </article>
            <article class="article_six">
                <h1><span class="market">进入卖场</span><img src="img/HOT.png" /></h1>
                <figure class="shouji">
                    <ul>
                        <!--<li>
                            <img src="img/图层 75.png">
                            <div>尼大衣来袭</div>
                        </li>
                        <li>
                            <img src="img/图层 76.png">
                            <div>女士系列</div>
                        </li>
                        <li>
                            <img src="img/图层 77.png">
                            <div>羽绒服棉服</div>
                        </li>-->
                    </ul>
                </figure>
            </article>
        </main>
        
        <footer class="footer">
            <ul>
                <li class="shangcheng"><img src="img/shangcheng.png"/><a href="#">商城</a></li>
                <li class="fenglei"><img src="img/fenlei.png"/><a href="#">分类</a></li>
                <li class="gouwucheng"><img src="img/gouwuche.png"/><a href="#">购物车</a></li>
                <li class="wode"><img src="img/wode.png"/><a href="#">我的</a></li>
            </ul>
        </footer>







        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <script src="js/swiper.jquery.min.js"></script>
        <script type="text/javascript">
        	$(function($){
        		$('.shangcheng').click(function(){
					location.href="index.html";
				});
				$('.fenglei').click(function(){
					location.href="html/classify02.html";
				});
				$('.gouwucheng').click(function(){
					location.href="html/shoppingCart.html";
				});
				$('.wode').click(function(){
					location.href="html/mine.html";
				});
				$('.span_three').click(function(){
					location.href="html/messageList.html";					
				});
				$('.market').click(function(){
                    location.href="html/classify02.html";
            	});	
			
			});
				
                 

        	
        </script>
        <script type="text/javascript" src="js/artTemplate.js"></script>
        <script type="text/html" id="temp">
                {{each list as v i}}
                <li>
                    <img src="{{v.imgUrl}}">
                    <div>{{v.title}}<br>{{v.content}}</div>
                </li>
                {{/each}}
        </script>
        
		
		<script type="text/html" id="temp2">
                {{each list2 as v i}}
                <li>
                    <img src="{{v.myimg}}">
                    <div>{{v.mycontent}}</div>
                </li>
                {{/each}}
        </script>
        
        <script type="text/html" id="temp3">
        		{{each list as v i}}
                <li>
                    <img src="{{v.imgUrl}}">
                    <div>{{v.mytitle}}</div>
                </li>
                {{/each}}
        </script>
        
        <script type="text/javascript">
            $(function(){
                var swiper = new Swiper('.swiper-container',{
                    autoplay:1000,
                    scrollbarHide: false,
                    autoplayDisableOnInteraction : false,
                    loop: true,
                    paginationClickable :true,
                    pagination : '.swiper-pagination'
           
                });
                
                $.ajax({
                    url:"json/index.json",
                    type:"get",
                    success: function(data){
                        
                        var str = template("temp",{list:data});
                        
                        $('.article_one ul').html(str);
                    }
                })
                
                $.ajax({
                	url: "json/index-two.json",
                	type: "get",
                	success: function(data2){
                		//console.log(data2)
                		var str2 = template("temp2",{list2:data2});
                		//console.log(str2)
                		$('.article_three ul').html(str2);
                	}
                })
            	
            	$.ajax({
                	url: "json/index-three.json",
                	type: "get",
                	success: function(data){
                		console.log(data)
                		var str = template("temp3",{list:data});
                		console.log(str)
                		$('.article_four ul, .article_six ul').html(str);
                	}
                })
            	
            	$.ajax({
                	url: "json/index-four.json",
                	type: "get",
                	success: function(data){
                		console.log(data)
                		var str = template("temp3",{list:data});
                		console.log(str)
                		$('.article_six ul').html(str);
                	}
                })
        	})
        </script>
    </body>
</html>